<template>
  <div class="widgetFormItem">
    <!-- title -->
    <div v-if="data && data.type === 'text'">text</div>
    <!-- table -->
    <div v-if="data && data.type === 'table'">table</div>
    <!-- 组件判断 -->
    <div v-else>
      <el-form-item
        v-if="data && data.key"
        :class="data.attr.className"
        :prop="data.attr.prop"
        :label="data.attr.label"
        :label-width="data.attr.labelWidth + 'px'"
        :required="data.attr.required"
        @click.native.stop="handleSelectWidget"
      >
        <!-- 输入框：input -->
        <input-item v-if="data.type === 'input'" :data="data"></input-item>
        <!-- 计步器：number -->
        <input-number-item
          v-if="data.type === 'inputNumber'"
          :data="data"
        ></input-number-item>
        <!-- 远程搜索：autocomplete -->
        <autocomplete-item
          v-if="data.type === 'autocomplete'"
          :data="data"
        ></autocomplete-item>
        <!-- 下拉：select -->
        <select-item v-if="data.type === 'select'" :data="data"></select-item>
        <!-- 单选框：radio -->
        <radio-item v-if="data.type === 'radio'" :data="data"></radio-item>
        <!-- checkbox -->
        <check-box-item
          v-if="data.type === 'checkBox'"
          :data="data"
        ></check-box-item>
        <!-- cascader -->
        <cascader-item
          v-if="data.type === 'cascader'"
          :data="data"
        ></cascader-item>
        <!-- switch -->
        <switch-item v-if="data.type === 'switch'" :data="data"></switch-item>
        <!-- slide -->
        <slider-item v-if="data.type === 'slider'" :data="data"></slider-item>
        <time-picker-item
          v-if="data.type === 'timePicker'"
          :data="data"
        ></time-picker-item>
        <color-picker-item
          v-if="data.type === 'colorPicker'"
          :data="data"
        ></color-picker-item>
        <rate-item v-if="data.type === 'rate'" :data="data"></rate-item>
      </el-form-item>
    </div>
  </div>
</template>

<script>
import InputItem from "./WidgetItem/InputItem";
import InputNumberItem from "./WidgetItem/InputNumberItem";
import AutocompleteItem from "./WidgetItem/AutocompleteItem";
import SelectItem from "./WidgetItem/SelectItem";
import RadioItem from "./WidgetItem/RadioItem";
import CheckBoxItem from "./WidgetItem/CheckBoxItem";
import CascaderItem from "./WidgetItem/CascaderItem";
import SwitchItem from "./WidgetItem/SwitchItem";
import SliderItem from "./WidgetItem/SliderItem";
import TimePickerItem from "./WidgetItem/TimePickerItem";
import ColorPickerItem from "./WidgetItem/ColorPickerItem";
import RateItem from "./WidgetItem/RateItem";
export default {
  name: "",
  components: {
    InputItem,
    InputNumberItem,
    AutocompleteItem,
    SelectItem,
    RadioItem,
    CheckBoxItem,
    CascaderItem,
    SwitchItem,
    SliderItem,
    TimePickerItem,
    ColorPickerItem,
    RateItem,
  },
  props: {
    element: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      data: this.element,
    };
  },
  watch: {
    // 监听数据，赋值给data，否则拖拽过来数据不会重新添加和渲染
    element: {
      handler: function (val) {
        this.data = val;
      },
      deep: true,
    },
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handleSelectWidget() {
      this.$store.commit("set_selectWidget", this.data);
    },
  },
};
</script>
<style lang="less" scoped>
</style>
